<template>
  <div class="column left-column">
    <PanelItem>
      <template #chartHeader>
        <div class="chart-header">
          <h2>柱状图-入职人数统计</h2>
          <a-select @change="handleYearChange" v-model:value="chooseYear" class="year-select">
            <a-select-option :value="2020">2020</a-select-option>
            <a-select-option :value="2021">2021</a-select-option>
          </a-select>
        </div>
      </template>
      <template #chartContent>
        <div class="chart" ref="inductionPanelRef"></div>
      </template>
    </PanelItem>
    <PanelItem title="饼状图-员工薪资分布">
      <template #chartContent>
        <div class="chart" ref="salaryRangePanelRef">

        </div>
      </template>
    </PanelItem>
  </div>
</template>

<script setup lang="ts">
import PanelItem from '../PanelItem/PanelItem.vue'
import {onMounted, ref} from "vue";
import type {Ref} from "vue"
import useVisualStore from "@/store/visualizationModule";
import {initInductionPanel, initSalaryRangePanel} from "@/views/VisualizationSystem/LeftColumn/config";
import {callbackType} from './types'
import {ECharts, EChartsOption} from "echarts";

const chooseYear = ref(2020)

// 入职人数统计
const inductionPanelRef = ref<HTMLElement>()
let reRenderEcharts: (fn: callbackType) => void

// 年份改变，重新渲染
const handleYearChange = async () => {
  const visualStore = useVisualStore()
  await visualStore.requestMemberInductionAction({
    year: chooseYear.value
  })
  reRenderEcharts((myCharts, option) => {
    option.series[0].data = visualStore.memberInductionData.count
    myCharts.setOption(option)
  })
}

const salaryRangePanelRef = ref<HTMLElement>()

// 初始化
onMounted(async () => {
  const visualStore = useVisualStore()
  await visualStore.requestMemberInductionAction({
    year: chooseYear.value
  })
  reRenderEcharts = initInductionPanel(inductionPanelRef as Ref<HTMLElement>)

  await visualStore.requestSalaryRangeCountAction()
  initSalaryRangePanel(salaryRangePanelRef as Ref<HTMLElement>)
})
</script>

<style lang="less" scoped>
.chart-header {
  display: flex;
  justify-content: center;
  position: relative;
  align-items: center;

  h2 {
    height: 0.6rem;
    color: #fff;
    line-height: .6rem;
    text-align: center;
    font-size: .25rem;
    font-weight: 400;
    margin-bottom: 0;
  }
}

.chart {
  height: 3.5rem;
}
</style>
<style lang="less">
.year-select {
  position: absolute;
  right: 0;
  top: 0.125rem;
  color: #fff;
  font-size: .25rem;
  font-weight: 400;

  &:hover {
    color: #1e9fff;
  }

  .ant-select-selector {
    text-align: center;
    border: none !important;
    background-color: transparent !important;

    .ant-select-selection-item {
      padding: 0 18px;
    }
  }
}
</style>